<template>
    <div>
        <!-- 头部面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/dashboard' }">控制台</el-breadcrumb-item>
            <el-breadcrumb-item>小区管理</el-breadcrumb-item>
        </el-breadcrumb>
        <hr>

        <!-- 头部的卡片 -->
        <el-card style="font-size: 20px;font-family: 'Helvetica Nee',serif">
            <b>小区管理</b>
            <p style="font-size: 15px">用于展示小区列表信息，以及增加、修改、删除等操作</p>
        </el-card>

        <!-- 数据相关的卡片 -->
        <el-card class="box-card">
            <div class="card-header">
                <!-- 添加按钮 -->
                <el-row>
                    <el-col :span="21">
                        <Button type="success" icon="md-add" @click="dialogFormVisibleAdd = true">添加</Button>
                        <span style="margin-left: 10px;"></span>
                        <Button v-if="showDeleteButton" type="error" icon="md-trash" @click="deleteByIds()">批量删除</Button>
                    </el-col>

                    <!-- 搜索框 -->
                    <el-col :span="3">
                        <Input search enter-button placeholder="请输入搜索的内容" @on-search="search()"/>
                    </el-col>
                </el-row>
            </div>

            <!-- 数据表格 -->
            <el-table v-loading="loadTable" :border="true" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column fixed prop="id" label="ID" width="80px"></el-table-column>
                <el-table-column prop="thumUrl" label="缩略图" width="120px">
                  <template slot-scope="scope">
                    <viewer :images="[scope.row.thumUrl]" style="height: 50px">
                      <img :src="scope.row.thumUrl" height="100%" width="100%" alt="">
                    </viewer>
                  </template>
                </el-table-column>
                <el-table-column prop="code" label="小区编号" :show-overflow-tooltip="true" width="100px"></el-table-column>
                <el-table-column prop="name" label="小区名称" width="100px"></el-table-column>
                <el-table-column prop="address" label="小区地址" ></el-table-column>
                <el-table-column prop="area" label="占地面积" width="80px"></el-table-column>
                <el-table-column prop="buildings" label="总栋数" width="80px"></el-table-column>
                <el-table-column prop="households" label="总户数" width="80px"></el-table-column>
                <el-table-column prop="greeningRate" label="绿化率" width="80px"></el-table-column>
                <el-table-column prop="developer" label="开发商名称" width="170px"></el-table-column>
                <el-table-column prop="estate" label="物业公司名称" width="110px"></el-table-column>
                <el-table-column prop="gmtCreate" label="创建时间" width="160px"></el-table-column>
                <el-table-column align="center" label="操作"  fixed="right" width="100px">
                    <template slot-scope="scope">
                        <ButtonGroup>
                            <Button type="info" icon="md-create"
                                    @click="showUpdateDialog(scope.row)"></Button>
                            <Button type="error" icon="md-trash"
                                    @click="deleteIds = [scope.row.id]; deleteByIds()"></Button>
                        </ButtonGroup>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block">
                <!-- 分页查询 -->
                <Page :total="total" show-elevator show-sizer :current="currentPage" :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"/>
            </div>

            <!-- 编辑弹窗 -->
            <el-dialog title="编辑" :close-on-click-modal="false" :visible.sync="dialogFormVisibleUpdate">
                <el-form :model="editFormUpdate">
                    <el-form-item label="小区名称">
                        <el-input v-model="editFormUpdate.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="坐落地址">
                        <el-input v-model="editFormUpdate.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="占地面积">
                        <el-input v-model="editFormUpdate.area" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="开发商名称">
                        <el-input v-model="editFormUpdate.developer" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="物业公司名称">
                        <el-input v-model="editFormUpdate.estate" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="绿化率">
                        <el-input v-model="editFormUpdate.greeningRate" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="总栋数">
                        <el-input v-model="editFormUpdate.buildings" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="总户数">
                        <el-input v-model="editFormUpdate.households" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="缩略图">
                        <el-upload
                                action="https://jsonplaceholder.typicode.com/posts/"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="update()">确 定</el-button>
                    <el-button @click="dialogFormVisibleUpdate = false">关 闭</el-button>
                </div>
            </el-dialog>

            <!-- 添加弹窗 -->
            <el-dialog title="添加" :close-on-click-modal="false" :visible.sync="dialogFormVisibleAdd">
                <el-form :model="editFormAdd">
                <el-form-item label="小区名称">
                    <el-input v-model="editFormAdd.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="坐落地址">
                    <el-input v-model="editFormAdd.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="占地面积">
                    <el-input v-model="editFormAdd.area" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="开发商名称">
                    <el-input v-model="editFormAdd.developer" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="物业公司名称">
                    <el-input v-model="editFormAdd.estate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="绿化率">
                    <el-input v-model="editFormAdd.greeningRate" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="总栋数">
                    <el-input v-model="editFormAdd.buildings" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="总户数">
                    <el-input v-model="editFormAdd.households" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="缩略图">
                    <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="add('editFormAdd')">确 定</el-button>
                    <el-button @click="dialogFormVisibleAdd = false">关闭</el-button>
                </div>
            </el-dialog>

        </el-card>

        <!-- 返回顶部按钮 -->
        <BackTop></BackTop>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "index",
        data() {
            return {
                searchText: "",
                loadTable: false,
                showDeleteButton: false,
                deleteIds: [],
                tableData: [],
                dialogFormVisibleUpdate: false,
                dialogFormVisibleAdd: false,
                editFormUpdate: {},
                editFormAdd: {},
                currentPage: 1,
                pageSize: 10,
                total: 0,
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        methods: {
            // 搜索方法
            search() {

            },
            // 添加数据方法
            add() {
                if (Object.keys(this.editFormAdd).length === 0) {
                    this.$message.error("请填写内容！");
                    return;
                }
                let url = this.host + "/community/add";
                this.axios.post(url, JSON.stringify(this.editFormAdd), {
                    headers: {
                        "Content-Type": "application/json"
                    }}).then((response) => {
                    if (response.data.statusCode == 2000) {
                        this.$message.success(response.data.data);
                        this.dialogFormVisibleAdd = false;
                        this.loadDataList();
                    } else {
                        this.$message.error(response.data.message);
                    }
                });
            },
            // 批量删除
            deleteByIds() {
                // 打开加载状态
                this.loadTable = true;
                let url = this.host + "/community/delete?" + this.deleteIds.map(item => `ids=${encodeURIComponent(item)}`).join('&');
                this.axios.get(url).then((response) => {
                    if (response.data.statusCode == 2000) {
                        this.$message.success(response.data.data);
                        this.loadDataList();
                    } else {
                        this.$message.error("删除失败，请稍后再试！");
                    }
                });
                // 取消加载状态
                this.loadTable = false;
                this.deleteIds = [],
                    this.showDeleteButton = false;
            },
            // 表格多选选择后触发的方法
            handleSelectionChange(rows) {
                if (rows.length === 0) {
                    this.showDeleteButton = false;
                    return;
                }
                this.showDeleteButton = true;
                for (let item of rows) {
                    this.deleteIds.push(item.id);
                }
            },
            // 打开弹窗方法
            showUpdateDialog(row) {
                this.dialogFormVisibleUpdate = true;
                this.editFormUpdate = row;
            },
            // 修改数据的方法
            update() {
                if (Object.keys(this.editFormUpdate).length === 0) {
                    this.$message.error("请填写内容！");
                    return;
                }
                let url = this.host + "/community/update";
                this.axios.post(url, JSON.stringify(this.editFormUpdate), {
                    headers: {
                        "Content-Type": "application/json"
                    }}).then((response) => {
                    if (response.data.statusCode == 2000) {
                        this.$message.success(response.data.data);
                        this.dialogFormVisibleUpdate = false;
                        this.loadDataList();
                    } else {
                        this.$message.error(response.data.message);
                    }
                });
            },
            // 改变第几页后调用的方法
            changePage(pageNum) {
                this.currentPage = pageNum;
                this.loadDataList();
            },
            // 改变每页多少条数据后调用的方法
            changePageSize(pageSize) {
                this.pageSize = pageSize;
                this.loadDataList();
            },
            // 加载当前模块数据
            loadDataList() {
                this.loadTable = true;
                let url = this.host + "/community/list?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize;
                this.axios.get(url).then((response) => {
                    if (response.data.statusCode == 2000) {
                        this.tableData = response.data.data.records;
                        this.currentPage = response.data.data.current;
                        this.pageSize = response.data.data.size;
                        this.total = response.data.data.total;
                    } else {
                        this.$message.error("加载数据出错了！");
                    }
                });
                this.loadTable = false;
            },
            // 加载所有小区数据
            loadCommunityList() {
                let url = this.host + "/community/list";
                this.axios.get(url).then((response) => {
                    if (response.data.statusCode == 2000) {
                        this.communityList = response.data.data.records;
                    } else {
                        this.$message.error("加载数据出错了！");
                    }
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        },
        mounted() {
            // 页面初始化后调用加载本模块数据和小区等的所有数据
            this.loadDataList();
            this.loadCommunityList();
        }
    }
</script>

<style scoped>
    .card-header {
        margin-bottom: 20px;
    }

    .block {
        text-align: center;
        margin-top: 10px;
    }

    .el-select {
        margin-left: 15px;
        margin-right: 30px;
    }

    .el-date-picker {
        margin-left: 50px;
    }
</style>
